Меню Footer в виде кнопок
<!DOCTYPE html><!--html5-->
<html lang="ru"><!--html для русских-->
<head><!--метаданные страницы-->
<meta charset="utf-8"/><!--кодировка-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><!--для IE правильный скрипт-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--предпочтения браузера-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--начальный масштаб для не адаптивных страниц-->
<META NAME="AUTHOR" CONTENT="Alexander Kosolapov">
<title>Меню footer в виде кнопок</title><!--имя страницы-->
<meta name="description" content="Меню footer в виде кнопок"/><!--для поисковых систем-->
<link rel="stylesheet" type="text/css" href="style.css"/><!--подключение стилей-->
<STYLE TYPE="text/css">
<!--
@page { margin: 0.5in }
P { margin-bottom: 0.08in; direction: ltr; widows: 2; orphans: 2 }
A:link { color: #0000ff; so-language: zxx }
-->
</STYLE>
</head><!--закрытие метатегов-->
<body><!--тело страницы-->
<div class="menu"><!--контейнер меню-->
<nav><!--навигация-->
<ul><!--группа ссылок-->
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Продукция</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul><!--/группа ссылок-->
</nav><!--/навигация-->
</div><!--/контейнер меню-->
</body><!--закрытие тела страницы-->
</html><!--закрытие кода-->
Код CSS:
@charset "utf-8";
.menu{/*контейнер меню*/
background:#fff;/*цвет блока*/
float:top;/*примыкание сверху*/
height:4.6em;/*высота блока*/
margin:auto;/*внешние отступы авто*/
position:relative;/*позиционирование варьируется*/
width:520px;/*ширина блока*/
border-radius:4px;/*радиус закругленных углов*/
-webkit-border-radius:4px;/*для хрома*/
-moz-border-radius:4px;/*для мозилы*/
box-shadow:0 1px 4px rgba(0,0,0,.6),0 0 30px rgba(0,0,0,.1)inset;/*2 внутренние тени*/
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.6),0 0 30px rgba(0,0,0,.1)inset;/*свойства теней для хрома*/
-moz-box-shadow:0 1px 4px rgba(0,0,0,.6),0 0 30px rgba(0,0,0,.1)inset;/*свойства теней для мозилы*/
}
.menu:before,
.menu:after{/*стили левой тени до блока и правой тени после блока */
bottom:15px;/*отступ тени снизу*/
content:"";/*добавляет контент тени*/
height:20%;/*высота тени от родителя*/
left:10px;/*отступ тени слева*/
max-width:240px;/*максимальная длина тени*/
position:absolute;/*позиция меняется в зависимости от родителя*/
box-shadow:0 15px 10px rgba(0,0,0,.7);/*тень бокса*/
-webkit-box-shadow:0 15px 10px rgba(0,0,0,.7);/*тень для хрома*/
-moz-box-shadow:0 15px 10px rgba(0,0,0,.7);/*тень для мозилы*/
transform:rotate(-3deg);/*трансформация тени на -3 градуса*/
-webkit-transform:rotate(-3deg);/*трансформация тени для хрома*/
-moz-transform:rotate(-3deg);/*трансформация тени для мозилы*/
-o-transform:rotate(-3deg);/*трансформация тени для оперы*/
width:50%;/*длина тени от родителя*/
z-index:-2;/*нижний слой по отношению к родителю*/
}
.menu:after{/*стили правой тени после блока*/
left:auto;/*отступ тени слева авто*/
right:10px;/*отступ тени справа*/
transform:rotate(3deg);/*трансформация тени на 3 градуса*/
-webkit-transform:rotate(3deg);/*трансформация тени для хрома*/
-moz-transform:rotate(3deg);/*трансформация тени для мозилы*/
-o-transform:rotate(3deg);/*трансформация тени для оперы*/
}
.menu ul li a{/*ссылка меню*/
color:#099;/*цвет букв*/
text-shadow:1px 1px 0.5px rgba(204,204,204,.9);/*тень текста*/
}
.menu li:hover a {/*ссылка меню при наведении*/
color:#f36;/*цвет букв*/
text-shadow:1px 1px 0.5px rgba(255,255,255,.8);/*тень текста*/
}
nav{/*блок навигации*/
border:0px solid #000;/*толщина рамки цвет*/
width:96%;/*ширина блока*/
position:absolute;/*позиция меняется в зависимости от родителя*/
top:20px;/*расположение от верха*/
left:10px;/*расположение слева*/
text-align:center;/*текст по центру*/
z-index:10;/*верхний слой*/
}
nav ul{/*у группы нет отступов*/
margin:0;/*внешние отступы*/
padding:0;/*внутренние отступы*/
}
nav li{/*у каждого пункта группы*/
display:inline-block;/*свойства блоков*/
margin:auto 10px;/* внешние отступы */
}
nav a{/*свойства ссылок*/
background-color:#f8f8f8;/*фон кнопок*/
background-image:-webkit-linear-gradient(top, #f8f8f8, #fff);
background-image:-moz-linear-gradient(top, #f8f8f8, #fff);
background-image:-ms-linear-gradient(top, #f8f8f8, #fff);
background-image:-o-linear-gradient(top, #f8f8f8, #fff);
background-image:linear-gradient(top, #f8f8f8, #fff);/*градиент*/
border:2px solid #fff;/*обрамление кнопок границами*/
display:inline-block;/*в строчку со свойствами блоков*/
position:relative;/*позиционирование варьируется*/
padding:5px 10px;/*внутренние отступы*/
text-decoration:none;/*подчёркивания нет*/
font:bold .8em 'Lucida sans', Arial, Helvetica;/*свойства шрифта*/
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;/*радиус закругления*/
-moz-box-shadow:0 1px 1px rgba(0,0,0,.05)inset, 0 0 1px 0 rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.3), 0 10px 10px -5px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05)inset, 0 0 1px 0 rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.3), 0 10px 10px -5px rgba(0,0,0,.2);
box-shadow:0 1px 1px rgba(0,0,0,.05)inset, 0 0 1px 0 rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.3), 0 10px 10px -5px rgba(0,0,0,.2);/*тени кнопок*/
}
nav a:hover{/*свойства ссылок при наведении*/
background-color:#eee;/*фон кнопок*/
background-image:-webkit-linear-gradient(top, #eee, #fff);
background-image:-moz-linear-gradient(top, #eee, #fff);
background-image:-ms-linear-gradient(top, #eee, #fff);
background-image:-o-linear-gradient(top, #eee, #fff);
background-image:linear-gradient(top, #eee, #fff);/*градиент*/
}
nav a:active{/*свойства ссылок при нажатии*/
top:1px;/*эффект нажатия на кнопку*/
background:#f5f5f5;/*фон кнопок*/
-moz-box-shadow:0 1px 1px rgba(0,0,0,.05)inset, 0 0 1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05)inset, 0 0 1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
box-shadow: 0 1px 1px rgba(0,0,0,.05)inset, 0 0 1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);/*тени кнопок*/
}
nav a::before{/*добавляются свойства*/
background-color:#e3e3e3;
background-image:-webkit-linear-gradient(top, #e3e3e3, #f7f7f7);
background-image:-moz-linear-gradient(top, #e3e3e3, #f7f7f7);
background-image:-ms-linear-gradient(top, #e3e3e3, #f7f7f7);
background-image:-o-linear-gradient(top, #e3e3e3, #f7f7f7);
background-image:linear-gradient(top, #e3e3e3, #f7f7f7);
bottom:-10px;
content:'';
left:-10px;
position:absolute;
right:-10px;
top:-10px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-moz-box-shadow:0 1px 1px rgba(0,0,0,.05)inset;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05)inset;
box-shadow:0 1px 1px rgba(0,0,0,.05)inset;
z-index:-1;
}
nav a:active::before{/*после нажатия добавляются свойства*/
top:-11px;
}